Embedding in an iFrame

If you want to embed the Web Client on your web page, place the iFrame tag in your HTML code where you want the client to appear. Use web.href as the value of the iFrame src attribute.

Do not add the iFrame element and its attributes with javascript dynamically at runtime. The iFrame must be present when the page loads.

allow Attributes

The following allow attributes must be included to enable the camera for image capture in supported browsers:

  • camera

  • autoplay

  • fullscreen

  • clipboard-read

  • clipboard-write
  • accelerometer
  • gyroscope
  • magnetometer

Example

Copy 
<iframe src="https://yourcompany.netverify.com/web/v4/app?locale=en-GB&authorizationToken=xxx" width="70%" height="80%" allow="camera;autoplay;fullscreen;clipboard-read;clipboard-write;accelerometer;gyroscope;magnetometer" allowfullscreen></iframe>
If you are nesting the iFrame in another iFrame, the listed allow attributes must be added to every iFrame.
Camera capture is only possible within an iFrame when the containing page is served securely over https.
Camera capture is not possible within an iFrame in incognito mode.

Width and Height

We recommend adhering to the responsive breaking points in the following table:

Size class Width Height
Large ≥ 900 px ≥ 710 px
Medium 640 px 660 px
Small 560 px 600 px
X-Small ≤ 480 px ≤ 535 px

When specifying the width and height of your iFrame, you may prefer to use percentage values so that the iFrame behaves responsively on your page.

The Web Client itself will responsively fill the iFrame that it is loaded into.

Absolute sizing example

Copy 
<iframe src="https://yourcompany.netverify.com/web/v4/app?locale=en-GB&authorizationToken=xxx" width="930" height="750" allow="camera;autoplay;fullscreen;clipboard-read;clipboard-write;accelerometer;gyroscope;magnetometer" allowfullscreen></iframe>

Responsive sizing example

Copy 
<iframe src="https://yourcompany.netverify.com/web/v4/app?locale=en-GB&authorizationToken=xxx" width="70%" height="80%" allow="camera;autoplay;fullscreen;clipboard-read;clipboard-write;accelerometer;gyroscope;magnetometer" allowfullscreen></iframe>

Optional iFrame Logging

When the Web Client is embedded in an iFrame it will communicate with the containing page using the JavaScript window.postMessage() method to send events containing pre-defined data. This allows the containing page to react to events as they occur (e.g. by directing to a new page once the success event is received).

Events include data that allows the containing page to identify which transaction triggered the event. Events are generated in a stateless way, so that each event contains general contextual information about the transaction (e.g., transaction reference, authorization token, etc.) in addition to data about the specific event that occurred.

Using JavaScript, the containing page can receive the notification and consume the data it contains by listening for the message event on the global window object and reacting to it as needed. The data passed by the Web Client in this notification is represented as JSON in the data string property of the listener method’s event argument. Parsing this JSON string results in an object with the properties described below.

All data is encoded with UTF-8.
This functionality is not available for instances of the Web Client running in a standalone window or tab.

event.data object

Required items appear in bold type.

Property Type Description
accountId string UUID of the account
authorizationToken string Authorization token, valid for a specified duration
workflowExecutionId string UUID of the workflow
customerInternalReference string Internal reference for a request to link it in the customer backend. It must not contain Personally Identifiable Information (PII) or sensitive data such as e-mail addresses.
eventType integer

Type of event that has occurred.

Possible values: 510 (application state-change)
dateTime string

UTC timestamp of the event in the browser

Format: YYYY-MM-DDThh:mm:ss.SSSZ
payload JSON object Information specific to the event generated (see event.data.payload object)

event.data.payload object

Required items appear in bold type.

Name Type Description
value string

Possible values:

  • loaded (Web Client loaded in the user’s browser.)

  • success (Images were accepted for verification.)

  • error (Verification could not be completed due to an error.)
metainfo JSON object Additional meta-information for error events. (see event.data.payload.metainfo object)

event.data.payload.metainfo object

Required items appear in bold type.

Property Type Description
code integer

Only present if payload.value=error

See errorCode values in Acquisition Status and Error Codes.

Example iFrame Logging Code

Copy 
function receiveMessage(event) {
    var data = window.JSON.parse(event.data);
  console.log('ID Verification Web was loaded in an iframe.');
  console.log('auth-token:', data.authorizationToken);
  console.log('event-type:', data.eventType);
  console.log('date-time:', data.dateTime);
  console.log('workflow-execution-id:', data.workflowExecutionId);
  console.log('account-id:', data.accountId);
  console.log('customer-internal-reference:', data.customerInternalReference);
  console.log('value:', data.payload.value);
  console.log('metainfo:', data.payload.metainfo);
}
window.addEventListener("message", receiveMessage, false);